<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .layout {
        display: grid;
        grid-template-columns: 200px 1fr;      /* 侧边栏 200px，主体自适应 */
        grid-template-rows: 80px 1fr 100px;    /* 头部 80px，主体自适应，底部 100px */
        height: 100vh;
        gap: 10px;
    }

    header {
        grid-column: 1 / -1;   /* 横跨所有列 */
        background: lightblue;
    }

    aside {
        background: lightgreen;
    }

    main {
        background: lightyellow;
    }

    footer {
        grid-column: 1 / -1;   /* 横跨所有列 */
        background: lightpink;
    }
</style>
<body>
<div class="layout">
    <header>头部</header>
    <aside>侧边栏</aside>
    <main>主体内容</main>
    <footer>底部</footer>
<!--    <footer>底部</footer>-->

</div>

</body>
</html>